<template>
  <view class="register-page">
    <!-- 注册表单 -->
    <view class="register-container">
      <text class="page-title">注册</text>
      <view class="register-form">
        <!-- 用户名输入 -->
        <view class="input-group">
          <view class="input-field">
            <input 
              type="text" 
              v-model="username" 
              placeholder="请输入用户名"
              maxlength="20"
            />
          </view>
        </view>

        <!-- 手机号输入 -->
        <view class="input-group">
          <view class="input-field">
            <input 
              type="number" 
              v-model="mobileNumber" 
              placeholder="请输入手机号"
              maxlength="11"
              @input="formatMobileNumber"
            />
          </view>
        </view>

        <!-- 验证码输入 -->
        <view class="input-group">
          <view class="input-field verification-field">
            <input 
              type="number" 
              v-model="verificationCode" 
              placeholder="请输入手机验证码"
              maxlength="6"
            />
            <view class="verification-btn" @click="sendVerificationCode" :class="{ disabled: isCountdown }">
              <text>{{ countdownText }}</text>
            </view>
          </view>
        </view>

        <!-- 注册按钮 -->
        <button class="register-btn" @click="handleRegister" :disabled="!canRegister">
          <text>注册</text>
        </button>

        <!-- 登录链接 -->
        <view class="login-link">
          <text>已有账号？</text>
          <text class="link-text" @click="goToLogin">立即登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      mobileNumber: "",
      verificationCode: "",
      isCountdown: false,
      countdown: 0,
      countdownTimer: null
    }
  },
  computed: {
    countdownText() {
      return this.isCountdown ? `${this.countdown}s` : "获取验证码";
    },
    canRegister() {
      return this.username.trim() && 
             this.mobileNumber.trim() && 
             this.verificationCode.trim() &&
             this.isValidMobile(this.mobileNumber);
    }
  },
  methods: {
    formatMobileNumber() {
      // 只允许输入数字
      this.mobileNumber = this.mobileNumber.replace(/\D/g, '');
    },
    isValidMobile(mobile) {
      return /^1[3-9]\d{9}$/.test(mobile);
    },
    sendVerificationCode() {
      if (!this.isValidMobile(this.mobileNumber)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }

      if (this.isCountdown) {
        return;
      }

      // 模拟发送验证码
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      });

      // 开始倒计时
      this.isCountdown = true;
      this.countdown = 60;
      
      this.countdownTimer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          this.isCountdown = false;
          clearInterval(this.countdownTimer);
          this.countdownTimer = null;
        }
      }, 1000);
    },
    handleRegister() {
      if (!this.canRegister) {
        uni.showToast({
          title: '请完善注册信息',
          icon: 'none'
        });
        return;
      }

      // 模拟注册过程
      uni.showLoading({
        title: '注册中...'
      });

      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        });

        // 注册成功后跳转到登录页面
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/fast/login'
          });
        }, 1500);
      }, 2000);
    },
    goToLogin() {
      uni.navigateTo({
        url: '/pages/fast/login'
      });
    }
  },
  onUnload() {
    // 页面卸载时清除定时器
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
      this.countdownTimer = null;
    }
  }
}
</script>

<style lang="scss" scoped>
.register-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #ED6567 0%, #ED6567 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.register-container {
  width: 100%;
  max-width: 600rpx;
  background: white;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);

  .page-title {
    font-size: 48rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 60rpx;
    display: block;
  }
}

.register-form {
  .input-group {
    margin-bottom: 40rpx;

    .input-field {
      position: relative;

      input {
        width: 100%;
        height: 88rpx;
        border: 2rpx solid #e0e0e0;
        border-radius: 44rpx;
        padding: 0 30rpx;
        font-size: 28rpx;
        color: #333;
        background: #f8f9fa;
        transition: all 0.3s ease;

        &:focus {
          border-color: #ED6567;
          background: white;
          box-shadow: 0 0 0 6rpx rgba(237, 101, 103, 0.1);
        }

        &::placeholder {
          color: #999;
        }
      }

      &.verification-field {
        display: flex;
        gap: 20rpx;

        input {
          flex: 1;
        }

        .verification-btn {
          width: 200rpx;
          height: 88rpx;
          background: #ED6567;
          color: white;
          border-radius: 44rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26rpx;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          white-space: nowrap;

          &:hover:not(.disabled) {
            background: #d55a5c;
          }

          &.disabled {
            background: #ccc;
            cursor: not-allowed;
          }

          text {
            color: white;
          }
        }
      }
    }
  }

  .register-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #ED6567 0%, #ED6567 100%);
    color: white;
    border: none;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover:not(:disabled) {
      transform: translateY(-2rpx);
      box-shadow: 0 8rpx 20rpx rgba(237, 101, 103, 0.3);
    }

    &:disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    text {
      color: white;
    }
  }

  .login-link {
    text-align: center;
    font-size: 26rpx;
    color: #666;

    .link-text {
      color: #ED6567;
      font-weight: 500;
      cursor: pointer;
      margin-left: 8rpx;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>